<template>

    <el-dialog :title="!!data ? (data.isSys == 1 ? '查看' : '修改') : '添加'" :visible.sync="visible" :close-on-click-modal="false">

      <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="80px" label-position="left" :inline="false" style="width: 400px;">

        <el-form-item label="ID" size="mini" prop="" v-if="!!data">
          <span>{{data.id}}</span>
        </el-form-item>

        <template v-if="!!data && data.isSys == 1">

          <el-form-item label="中文描述" prop="">
            <span>{{data.value}}</span>
          </el-form-item>

          <el-form-item label="英文描述" prop="">
            <span>{{data.enValue}}</span>
          </el-form-item>

          <el-form-item label="类型" prop="">
            <span>{{data.strType}}</span>
          </el-form-item>

        </template>
        <template v-else>

          <el-form-item label="中文描述" size="mini" prop="value">
            <el-input placeholder="" v-model.number="mainQuery.value" @keyup.enter.native="submit" clearable></el-input>
          </el-form-item>

          <el-form-item label="英文描述" size="mini" prop="enValue">
            <el-input placeholder="" v-model.number="mainQuery.enValue" @keyup.enter.native="submit" clearable></el-input>
          </el-form-item>
          
          <el-form-item label="类型" prop="type">
            <span>扣款</span>

            <!-- <el-radio-group v-model="mainQuery.type">
              <el-radio v-for="item in typeOptions" :label="item.value">{{item.label}}</el-radio>
            </el-radio-group> -->
          </el-form-item>

        </template>

        <template v-if="!!data">
          <el-form-item label="是否内置" size="mini" prop="">
            <span>{{data.strIsSys}}</span>
          </el-form-item>

          <template v-if="data.isSys != 1">
            <el-form-item label="创建时间" size="mini" prop="">
              <span>{{data.createTime}}</span>
            </el-form-item>

            <el-form-item label="创建人" size="mini" prop="">
              <span>{{data.createBy}}</span>
            </el-form-item>
          </template>
        </template>

      </el-form>


      <template v-if="!!data && data.isSys == 1">
        <div slot="footer" class="dialog-footer">
          <el-button @click="close" size="mini">关 闭</el-button>
        </div>
      </template>
      <template v-else>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close" size="mini">取 消</el-button>
          <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button>
        </div>
      </template>


    </el-dialog>

</template>

<script>

import ApiMain from '@/api/settle.accountAccessType';

export default {
  mixins: [
  ],
  props: [
    'typeOptions',
  ],
  data () {
    return {

      visible   : false,
      popDeleteVisible: false,
      loading         : false,

      mainQueryRaw: null,
      mainQuery: {
        value  : '',
        enValue: '',
        type   : 1,
      },

      rules: {
        value: [
          { required: true, message: '请填写内容', trigger: 'blur' },
        ],
        enValue: [
          { required: true, message: '请填写内容', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
      },

      data: null,
    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    show (data) {

      this.reset();

      if (data) {
        this.data = data;
        for (var k in this.mainQuery) {
          this.mainQuery[k] = this.data[k];
        }
      }

      this.visible = true;
    },

    close () {
      this.visible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.id   = null;
      this.data = null;
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;
      this.loading = true;

      try {

        var req = Object.copy(this.mainQuery);

        if (this.data) {
          req.id = this.data.id;
          await ApiMain.set(req);
        }
        else {
          await ApiMain.add(req);
        }

        this.$message({message: '操作成功', type: 'success'});
        this.close();

      } catch (err) { console.error(err); }

      this.loading = false;
    },

  }
}
</script>

<style>

</style>
